<template>
  <el-card class="card-row" shadow="hover" :body-style="{ padding: '10px' }">
    <el-row class="card-contain">
      <el-col :span="6" class="height100">
        <img
          src="/static/image/course-cover-default-d27882d4.png"
          class="course-cover"
        />
      </el-col>
      <el-col class="info-div height100" :span="14">
        <div class="info-flex-warp">
          <el-row class="info-detail">{{ this.info.course_name }}</el-row>
          <el-row class="info-detail info-little"
            >开课信息：{{ this.info.college }} {{ this.info.year }}年{{
              this.info.semester
            }}学期
          </el-row>
          <el-row class="info-detail info-little"
            >授课教师：{{ this.info.teacher_name }}</el-row
          >
        </div>
      </el-col>
      <el-col :span="4" class="height100">
        <el-button round class="detail-button" @click="gotoDetail">
          课程详情页
        </el-button>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import stuInfo from "../../store/student";

export default {
  props: ["classInfo"],
  methods: {
    gotoDetail() {
      // console.log("detail");
      stuInfo.commit("setChoosenCourse", this.info);
      this.$router.push("/CourseDetail");
    },
  },
  data() {
    return {
      info: this.$props.classInfo,
    };
  },
  mounted() {
    // console.log(this.info);
  },
};
</script>

<style>
.height100 {
  height: 100%;
}
.card-row {
  /* padding: 10px 0; */
  margin: 10px;
}
.course-cover {
  display: block;
  padding: 5px;
  width: 100%;
}

.info-div {
  padding-left: 10px;
  padding-top: 10px;
  height: 100%;
}

.info-detail {
  /* font-size: 11px; */
  padding: 3px;
  height: 35px;
}

.info-little {
  font-size: 11px;
  color: #909399;
}

.info-flex-warp {
  flex-flow: column;
  display: flex;
  height: 100%;
  align-items: left;
  /* text-align: center; */
  /* justify-items: center; */
}
.detail-button {
  position: absolute;
  top: 50%;
}
</style>
